<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Virtual Labs Manager</title>
        <!--        <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>-->
        <link rel="stylesheet" type="text/css" href="/css/guacamole/client.css"/>
        <link rel="stylesheet" type="text/css" href="/css/guacamole/keyboard.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>        
    </head>
    <body>
        <!-- Display -->
        <div class="displayOuter">
            <div class="displayMiddle">
                <div id="display">
                </div>
            </div>
        </div>

        <!-- Dimensional clone of viewport -->
        <div id="viewportClone">

        </div>

        <!-- Notification area -->
        <div id="notificationArea">

        </div>

        <!-- Images which should be preloaded -->
        <div id="preload">
            <img src="/images/action-icons/guac-close.png"/>
            <img src="/images/action-icons/progress.png"/>
        </div>

        <script type="text/javascript" src="/js/guacamole/blob.js"></script>
        <script type="text/javascript" src="/js/guacamole/filesaver.js"></script>

        <!-- guacamole-common-js scripts -->             
        <script type="text/javascript" src="/js/guacamole/keyboard.js" type="text/javascript" ></script>        
        <script type="text/javascript" src="/js/guacamole/mouse.js" type="text/javascript" ></script>
        <script type="text/javascript" src="/js/guacamole/layer.js" type="text/javascript" ></script>
        <script type="text/javascript" src="/js/guacamole/tunnel.js" type="text/javascript" ></script>
        <script type="text/javascript" src="/js/guacamole/audio.js" type="text/javascript" ></script>
        <script type="text/javascript" src="/js/guacamole/guacamole.js" type="text/javascript" ></script>
        <script type="text/javascript" src="/js/guacamole/oskeyboard.js" type="text/javascript" ></script>



        <!-- guacamole-default-webapp scripts -->
        <script type="text/javascript" src="/js/guacamole/session.js"></script>
        <script type="text/javascript" src="/js/guacamole/history.js"></script>
        <script type="text/javascript" src="/js/guacamole/guac-ui.js"></script>
        <script type="text/javascript" src="/js/guacamole/client-ui.js"></script>

        <!-- Init -->
        <script type="text/javascript"> /* <![CDATA[ */

            // Start connect after control returns from onload (allow browser
            // to consider the page loaded).
            window.onload = function() {
                window.setTimeout(function() {

                    var tunnel;

                    tunnel = new Guacamole.HTTPTunnel("/guac/tunnel");

                    // Instantiate client
                    var guac = new Guacamole.Client(tunnel);

                    var parameter = "host=<?php echo $this->hostName; ?>&port=<?php echo $this->port; ?>";

                    // Add client to UI
                    guac.getDisplay().className = "software-cursor";
                    GuacUI.Client.display.appendChild(guac.getDisplay());

                    // Tie UI to client
                    GuacUI.Client.attach(guac);

                    try {

                        // Calculate optimal width/height for display
                        var optimal_width = window.innerWidth;
                        var optimal_height = window.innerHeight;

                        // Scale width/height to be at least 600x600
                        if (optimal_width < 600 || optimal_height < 600) {
                            var scale = Math.max(600 / optimal_width, 600 / optimal_height);
                            optimal_width = Math.floor(optimal_width * scale);
                            optimal_height = Math.floor(optimal_height * scale);
                        }

                        // Get entire query string, and pass to connect().
                        // Normally, only the "id" parameter is required, but
                        // all parameters should be preserved and passed on for                    

                        var connect_string =
                                parameter +
                                +"&width=" + optimal_width
                                + "&height=" + optimal_height;
                        console.log("Connect String: " + connect_string);
                        guac.connect(connect_string);

                    }
                    catch (e) {
                        GuacUI.Client.showError(e.message);
                    }

                }, 0);
                document.title = 'Virtual Labs Manager';
            };

            /* ]]> */</script>
        <script type="text/javascript">
            $(document).ready(function() {
                document.title = 'blah';
            });
        </script>
    </body>

</html>